<template>
    <div>
        <el-main>
            <el-table
                ref="multipleTable"
                tooltip-effect="dark"
                :data="tableData"
                row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange"
                border
                style="width: 100%"
                row-key="getRowKey"
            >
                <el-table-column
                    type="selection"
                    :reserve-selection="true"
                    width="55"
                ></el-table-column>
                <el-table-column
                    prop="id"
                    label="u_id"
                    width="100"
                ></el-table-column>
                <el-table-column prop="nickname" label="昵称"></el-table-column>
                <el-table-column prop="userid" label="账号"></el-table-column>
                <el-table-column
                    prop="password"
                    label="密码"
                    align="center"
                ></el-table-column>
                <el-table-column prop="header" label="头像">
                    <template slot-scope="scope">
                        <img
                            :src="url + scope.row.header"
                            alt=""
                            style="width: 40px; heigth: 40px"
                        />
                    </template>
                </el-table-column>
                <el-table-column prop="level" label="等级"></el-table-column>
                <!-- ---------------------------------------------修改-------------------------------- -->
                <el-table-column label="操作" left=10px>
                    <template slot-scope="scope" >
                        <el-button
                        
                            type="info"
                            size="mini"
                            icon="el-icon-edit"
                            @click="showEditDialog(scope.row)"
                            >编辑</el-button
                        >
                        <!-- 删除按钮 -->
                        <el-button
                            size="mini"
                            type="danger"
                            icon="el-icon-delete"
                            @click="handleDelete(scope.$index, scope.row)"
                        >
                            删除</el-button
                        >
                        <!-- ----------------------------对话框---------------->
                        <el-dialog
                            title="编辑用户"
                            :visible.sync="editDialogVisible"
                            width="37.5%"
                            @close="editDialogClosed"
                        >
                            <el-form
                                :model="editForm"
                                :rules="editFormRules"
                                ref="editFormRef"
                                label-width="100px"
                            >
                                <!-- 昵称 -->
                                <el-form-item label="昵称" prop="nickname">
                                    <el-input
                                        v-model="editForm.nickname"
                                    ></el-input>
                                </el-form-item>
                                <!-- 账号 -->
                                <el-form-item label="账号" prop="userid">
                                    <el-input
                                        v-model="editForm.userid"
                                    ></el-input>
                                </el-form-item>
                                <!-- 密码 -->
                                <el-form-item label="密码" prop="password">
                                    <el-input
                                        v-model="editForm.password"
                                    ></el-input>
                                </el-form-item>
                                <!-- 等级 -->
                                <el-form-item label="等级" prop="level">
                                    <el-input
                                        v-model="editForm.level"
                                    ></el-input>
                                </el-form-item>
                            </el-form>
                            <!-- 对话框footer底部框架 -->
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="editDialogVisible = false"
                                    >取 消</el-button
                                >
                                <el-button type="primary" @click="editUserInfo"
                                    >确 定</el-button
                                >
                            </span>
                        </el-dialog>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <div >
            <div class="block"  >
                <span class="demonstration" > </span>
                <el-pagination 
                    :total="150"
                    @current-change="handleCurrentChange"
                    :page-size="pager._limit"
                    :current-page.sync="pager._page"
                    layout="prev, pager, next"
                >
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
// import axios from 'axios'
// import { validate } from 'json-schema';

export default {
    data() {
        return {
            tableData: [],
            pager: {
                _page: 1,
                _limit: 7,
            },
            //控制修改用户信息对话框是否显示
            editDialogVisible: false,
            //查询到的用户信息对象
            editForm: {},
            //修改表单的规则对象
            editFormRules: {},
            url: process.env.VUE_APP_API_URL,
        };
    },
    created() {
        this.query();
    },
    //注入
    methods: {
        query() {
            this.$api.__api_list_users_get(this.pager).then((data) => {
                this.tableData = data;
            });
        },

        // 监听删除的事件
        handleDelete(index, row) {
            this.$api.__api_list_users_delete(row).then((res) => {
                this.query();
            });
        },
        //展示编辑用户的对话框
        showEditDialog(row) {
            this.editForm = row;
            this.editDialogVisible = true;
        },

        //监听修改用户对话框的关闭事件
        editDialogClosed() {
            this.$refs.editFormRef.resetFields();
        },
        // 修改用户信息并且提交
        editUserInfo() {
            this.$refs.editFormRef.validate(async (valid) => {
                if (!valid) return;

                let a = {};

                this.$api
                    .__api_list_users_get({ id: this.editForm.id })
                    .then((res) => {
                        a = res[0];
                        a.nickname = this.editForm.nickname;
                        a.userid = this.editForm.userid;
                        a.password = this.editForm.password;
                        a.level = this.editForm.level;
                        this.$api.__api_list_users_put(a, a).then((res) => {
                            //提示修改成功
                            this.$message.success("更新用户信息成功");
                            //刷新数据列表
                            this.query();
                            //关闭对话框
                            this.editDialogVisible = false;
                        });
                    });
            });
        },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach((row) => {
                    //回显操作
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                //清除回显
                this.$refs.multipleTable.clearSelection();
            }
        },
        //多选框被选中触发，参数为selection，可获取选中行的数据，数组类型，多选后，会将选中的每行都放进数组里面，数组套数组。
        //可通过selection.length获取选中的行数量从而去做一些判断
        handleSelectionChange(selection) {
            this.selectionNum = selection.length;
            this.selection = selection;
        },
        getRowKey(row) {
            return row.id;
        },
        // 当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.pager._page = val;
            this.query();
            console.log(this.pager);
        },
    },
};
</script>
<style scoped>
#nav {
    padding: 0px;
}
.el-main {
    background-color: rgb(234, 237, 241);
    text-align: center;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}
.el-header {
    background-color: #b3c0d1;
    color: #333;
    line-height: 60px;
}
.el-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top:20px ;
}
.el-aside {
    color: #333;
}
.el-pager,
.el-pager li {
    vertical-align: top;
    margin: 0;
    display: inline-block;
    height: 28px;
}
</style>